<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DELI编程智能体向导V1.00</title>
    <style>
        :root {
            --body-bg-start: #e8eaf6;
            --body-bg-end: #d1c4e9;
            --card-bg: rgba(255, 255, 255, 0.9);
            --button-gradient-start: #7e57c2;
            --button-gradient-end: #9575cd;
            --button-hover-gradient-start: #673ab7;
            --button-hover-gradient-end: #8e67c7;
            --input-border: #bdbdbd;
            --input-focus-border: #7e57c2;
            --dropdown-bg: white;
            --dropdown-hover: #f3e5f5;
            --text-color: #212121;
            --text-light: #757575;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --accent-color: #7e57c2;
            --copy-btn-text: #555;
            --copy-success: #4caf50;
            --tooltip-bg: rgba(0, 0, 0, 0.7);
            --tooltip-text: white;
            --footer-btn-bg: #7e57c2;
            --footer-btn-hover: #673ab7;
            --footer-btn-text: white;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(to bottom, var(--body-bg-start), var(--body-bg-end));
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }

        .card {
            background-color: var(--card-bg);
            border-radius: 20px;
            box-shadow: 0 16px 32px var(--shadow-color);
            padding: 40px;
            width: 90%;
            max-width: 800px;
            box-sizing: border-box;
            margin-bottom: 30px;
        }

        h1 {
            text-align: center;
            font-size: 28px;
            margin-bottom: 40px;
            color: var(--accent-color);
        }

        .form-group {
            margin-bottom: 30px;
        }

        label {
            display: block;
            margin-bottom: 12px;
            font-size: 18px;
            font-weight: 500;
        }

        select {
            width: 100%;
            padding: 16px;
            border: 1px solid var(--input-border);
            border-radius: 10px;
            transition: border-color 0.3s ease;
            font-size: 16px;
            background-color: white;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='' viewBox='0 0 24 24' fill='none' stroke='%237e57c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 20px;
        }

        select:focus {
            border-color: var(--input-focus-border);
            outline: none;
        }

        textarea {
            width: 100%;
            padding: 16px;
            border: 1px solid var(--input-border);
            border-radius: 10px;
            transition: border-color 0.3s ease;
            font-size: 16px;
            min-height: 150px;
            resize: vertical;
            box-sizing: border-box;
        }

        textarea:focus {
            border-color: var(--input-focus-border);
            outline: none;
        }

        button {
            width: 100%;
            padding: 16px;
            background: linear-gradient(to right, var(--button-gradient-start), var(--button-gradient-end));
            color: white;
            border: none;
            border-radius: 10px;
            box-shadow: 0 8px 16px var(--shadow-color);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 18px;
            font-weight: 500;
        }

        button:hover {
            background: linear-gradient(to right, var(--button-hover-gradient-start), var(--button-hover-gradient-end));
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(1px);
        }

        #result {
            margin-top: 40px;
            padding: 25px;
            border-radius: 10px;
            background-color: rgba(126, 87, 194, 0.1);
            border-left: 5px solid var(--accent-color);
            display: none;
            position: relative;
        }

        #result h3 {
            margin-top: 0;
            color: var(--accent-color);
            font-size: 20px;
        }

        .copy-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            color: var(--copy-btn-text);
            border: none;
            border-radius: 6px;
            padding: 0;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            opacity: 0.7;
            background: none;
            width: auto;
        }

        .copy-btn:hover {
            opacity: 1;
        }

        .copy-btn:active {
            transform: translateY(1px);
        }

        .copy-btn.copied {
            color: var(--copy-success);
        }

        .copy-btn svg {
            width: 16px;
            height: 16px;
            order: 2;
        }

        .tooltip {
            position: absolute;
            top: -30px;
            right: 0;
            background-color: var(--tooltip-bg);
            color: var(--tooltip-text);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            white-space: nowrap;
        }

        .copy-btn:hover .tooltip {
            opacity: 1;
        }

        .danmaku {
            position: fixed;
            top: 20px;
            right: 20px;
            pointer-events: none;
            z-index: 999;
            white-space: nowrap;
            padding: 12px 24px;
            border-radius: 25px;
            color: white;
            background-color: hsl(calc(var(--random-hue, 0) * 360), 30%, 60%);
            animation: danmakuMove 0.5s forwards;
            font-size: 14px;
            opacity: 0;
        }

        @keyframes danmakuMove {
            0% {
                transform: translateX(100px);
                opacity: 0;
            }
            50% {
                transform: translateX(-10px);
                opacity: 1;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .footer-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
            width: 90%;
            max-width: 800px;
        }

        .footer-btn {
            padding: 10px 20px;
            background: linear-gradient(to right, var(--footer-btn-bg), var(--button-gradient-end));
            color: var(--footer-btn-text);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 8px var(--shadow-color);
            flex: 1;
            max-width: 200px;
        }

        .footer-btn:hover {
            background: linear-gradient(to right, var(--footer-btn-hover), var(--button-hover-gradient-end));
            transform: translateY(-2px);
        }

        .footer-btn:active {
            transform: translateY(1px);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>DELI编程智能体向导V1.00</h1>
        
        <div class="form-group">
            <label for="functionType">请选择需要智能体生成的量化代码类型</label>
            <select id="functionType">
                <option value="" disabled selected>请选择一个选项</option>
                <option value="mt5">MetaTrader5自动交易Python程序提示词模板</option>
                <option value="tdx">通达信选股指标程序提示词模板</option>
                <option value="miniqmt">miniQMT自动交易Python程序提示词模板</option>
                <option value="jizhi">极智量化平台的Python策略程序提示词模板</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="customRequirements">自定义需求（可选）</label>
            <textarea id="customRequirements" placeholder="请输入您的具体需求或特殊要求..."></textarea>
        </div>
        
        <button onclick="generatePrompt()">生成提示词</button>
        
        <div id="result">
            <button class="copy-btn" onclick="copyToClipboard()">
                <span class="tooltip">复制提示词</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>
            </button>
            <h3>生成的提示词</h3>
            <pre id="promptResult"></pre>
        </div>
    </div>

    <div class="footer-buttons">
        <button class="footer-btn" onclick="window.open('https://space.coze.cn/', '_blank')">DELI量化智能体</button>
        <button class="footer-btn" onclick="window.open('https://www.deepseek.com/', '_blank')">deepseek</button>
        <button class="footer-btn" onclick="window.open('https://www.doubao.com/', '_blank')">豆包</button>
    </div>

    <script>
        // 预定义的提示词模板
        const promptTemplates = {
            mt5: `### MetaTrader5自动交易Python程序开发

请基于以下需求，生成一个MetaTrader5平台的自动交易Python程序：

1. 交易品种：{{SYMBOL}}
2. 时间周期：{{TIMEFRAME}}
3. 入场信号：
   - {{ENTRY_SIGNAL_1}}
   - {{ENTRY_SIGNAL_2}}
4. 出场信号：
   - {{EXIT_SIGNAL_1}}
   - {{EXIT_SIGNAL_2}}
5. 风险管理：
   - 单笔风险：{{RISK_PER_TRADE}}%
   - 止损设置：{{STOP_LOSS}}点
   - 止盈设置：{{TAKE_PROFIT}}点

请提供完整的Python代码，包括：
- 必要的MT5 API连接和初始化
- 信号判断函数
- 交易执行函数
- 风险管理模块
- 主循环逻辑

要求代码结构清晰，添加必要的注释，并包含适当的错误处理。`,
            
            tdx: `### 通达信选股指标程序开发

请基于以下需求，开发一个通达信选股指标程序：

1. 选股条件：
   - {{CONDITION_1}}
   - {{CONDITION_2}}
   - {{CONDITION_3}}

2. 指标公式要求：
   - 使用通达信公式语言编写
   - 提供完整的选股公式代码
   - 包含指标说明和参数设置

请提供符合通达信平台要求的选股指标代码，并确保代码能够正确实现上述选股条件。`,
            
            miniqmt: `### miniQMT自动交易Python程序开发

请基于以下需求，开发一个miniQMT平台的自动交易Python程序：

1. 交易品种：{{SYMBOL}}
2. 策略逻辑：
   - 入场条件：{{ENTRY_CONDITION}}
   - 出场条件：{{EXIT_CONDITION}}
3. 交易参数：
   - 交易数量：{{VOLUME}}
   - 止损点位：{{STOP_LOSS}}
   - 止盈点位：{{TAKE_PROFIT}}

请提供完整的Python代码，包括：
- miniQMT API连接和初始化
- 数据获取模块
- 信号生成模块
- 交易执行模块
- 风险控制模块

代码应结构清晰，注释完善，并包含适当的错误处理机制。`,
            
            jizhi: `### 极智量化平台Python策略程序开发

请基于以下需求，开发一个适用于极智量化平台的Python策略程序：

1. 策略类型：{{STRATEGY_TYPE}}
2. 交易标的：{{INSTRUMENT}}
3. 策略逻辑：
   - 入场规则：{{ENTRY_RULES}}
   - 出场规则：{{EXIT_RULES}}
   - 资金管理：{{POSITION_SIZING}}

请提供完整的Python代码，包括：
- 策略类定义
- 初始化方法
- 数据处理方法
- 信号生成方法
- 交易执行方法

代码应遵循极智量化平台的API规范，结构清晰，注释完整。`
        };

        // 记录是否已显示过气泡提示
        let hasShownDanmaku = false;

        function generatePrompt() {
            const functionType = document.getElementById('functionType').value;
            const customRequirements = document.getElementById('customRequirements').value;
            
            if (!functionType) {
                alert('请选择一个量化代码类型');
                return;
            }
            
            // 获取对应模板
            const template = promptTemplates[functionType];
            
            // 生成结果
            const resultElement = document.getElementById('result');
            const promptResultElement = document.getElementById('promptResult');
            
            // 简单替换模板变量，实际应用中可以更复杂
            let result = template.replace(/{{.*?}}/g, '[待填充]');
            
            // 添加自定义需求
            if (customRequirements) {
                result += `\n\n### 自定义需求\n${customRequirements}`;
            }
            
            promptResultElement.textContent = result;
            resultElement.style.display = 'block';
            
            // 重置复制按钮状态
            const copyBtn = resultElement.querySelector('.copy-btn');
            copyBtn.classList.remove('copied');
            copyBtn.innerHTML = `
                <span class="tooltip">复制提示词</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>
            `;
            
            // 重置气泡提示状态
            hasShownDanmaku = false;
        }

        function copyToClipboard() {
            const textToCopy = document.getElementById('promptResult').textContent;
            navigator.clipboard.writeText(textToCopy).then(() => {
                const copyBtn = document.querySelector('.copy-btn');
                copyBtn.classList.add('copied');
                copyBtn.innerHTML = `
                    <span class="tooltip">已复制</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                `;
                
                // 3秒后恢复原状态
                setTimeout(() => {
                    copyBtn.classList.remove('copied');
                    copyBtn.innerHTML = `
                        <span class="tooltip">复制提示词</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                        </svg>
                    `;
                }, 3000);
                
                // 只显示一次气泡提示
                if (!hasShownDanmaku) {
                    generateDanmaku('复制成功！');
                    hasShownDanmaku = true;
                }
            }).catch(err => {
                console.error('复制失败: ', err);
                alert('复制失败，请手动复制。');
            });
        }

        function generateDanmaku(message) {
            // 移除已有的气泡提示
            const existingDanmaku = document.querySelector('.danmaku');
            if (existingDanmaku) {
                existingDanmaku.remove();
            }
            
            const danmaku = document.createElement('div');
            danmaku.classList.add('danmaku');
            danmaku.style.setProperty('--random-hue', Math.random());
            danmaku.textContent = message;
            document.body.appendChild(danmaku);

            // 3秒后自动消失
            setTimeout(() => {
                danmaku.style.animation = 'none';
                danmaku.style.opacity = '0';
                setTimeout(() => {
                    if (document.contains(danmaku)) {
                        danmaku.remove();
                    }
                }, 500);
            }, 3000);
        }
    </script>
</body>
</html>
    